<template>
  <div class="base-page">
    <Loading v-if="loading" class="base-page-loading" @touchstart.stop.prevent.self/>
    <slot class="base-page-title" name="title" v-if="!hideHeader">
      <top-hrader
        @back="$emit('back')"
        :name="name"
        :show-add="showAdd"
        :back="back"
        :className="className"
        :theme="theme"
      >
        <template slot="left">
          <slot name="left"></slot>
        </template>
        <template slot="name">
          <slot name="name"></slot>
        </template>
        <template slot="right">
          <slot name="right"></slot>
        </template>
      </top-hrader>
    </slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import topHrader from "~/components/common/header.vue";
import Loading from "~/components/loading";
export default {
  props: {
    name: {
      default: "确认订单"
    },
    showAdd: {
      type: Boolean,
      default: false
    },
    className: {
      default: 1
    },
    theme: {
      default: ""
    },
    back: {
      // 如果为true ,则处触发back事件，具体处理逻辑再调用页面处理
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    hideHeader:{
      tyoe:Boolean,
      default:false,
    }
  },
  components: {
    topHrader,
    Loading
  },
  beforeMount() {

  },
  mounted() {
    // window.addEventListener('scroll',this.scrollHandle,true)
    document.addEventListener("DOMMouseScroll", this.scrollHandle, false);
    document.addEventListener("mousewheel", this.scrollHandle, false);
  },
  destroyed() {
    // window.removeEventListener('scroll',this.scrollHandle,true)
    document.removeEventListener("DOMMouseScroll", this.scrollHandle, false);
    document.removeEventListener("mousewheel", this.scrollHandle, false);
  },
  methods: {
    scrollHandle(e) {
      if (this.loading) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.base-page-loading {
  background-color: rgba(255, 255, 255, 0.7);
}
</style>


